<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=LyDLAdzhhgArwXN3B1oWnrHF7qz6gAv5"></script>
    <style>
        #map{
            width: 700px;
            height: 500px;
        }
    </style>
</head>
<body>
<form action="http://192.168.1.117/ajax/a.php">
    <input type="text" id="lng">
    <input type="text" id="lat"><br>
    <input type="text" id="txt">
    <input type="button" id="btn" value="查找">
    <div id="map"></div>
    <script>
        var map = new BMap.Map("map");
        var point = new BMap.Point(116.404, 39.915);
        map.centerAndZoom(point, 15);

        map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
        map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用

        map.addControl(new BMap.NavigationControl());
        map.addControl(new BMap.ScaleControl());
        map.addControl(new BMap.OverviewMapControl());
        map.addControl(new BMap.MapTypeControl());

        var traffic = new BMap.TrafficLayer();        // 创建交通流量图层实例
        map.addTileLayer(traffic);                    // 将图层添加到地图上







        var myIcon = new BMap.Icon("img/333.png", new BMap.Size(300,260), {
// 指定定位位置。
// 当标注显示在地图上时，其所指向的地理位置距离图标左上
// 角各偏移10像素和25像素。您可以看到在本例中该位置即是
            // 图标中央下端的尖角位置。
            anchor: new BMap.Size(210, 260)
            // 设置图片偏移。
            // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
            // 需要指定大图的偏移位置，此做法与css sprites技术类似。
        });
        // 创建标注对象并添加到地图
        var markerE = new BMap.Marker(point, {icon: myIcon});
        map.addOverlay(markerE);

        var opts = {
            width : 100,     // 信息窗口宽度
            height: 10,     // 信息窗口高度
            title : "Hello,MMP"  // 信息窗口标题
        }
        var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象
        map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口


        var marker;
        map.addEventListener('click',function(e){
            console.log(e.point);
            map.removeOverlay(marker);
            marker = new BMap.Marker(e.point);

            map.addOverlay(marker);
            lng.value = e.point.lng;
            lat.value = e.point.lat;


        })

        var txt = document.getElementById("txt");
         var btn = document.getElementById("btn")
      btn.onclick = function () {
          map.centerAndZoom(txt.value, 15);

        }





    </script>
</form>
<input type="submit">
</body>
</html>